<div class="row">

    <div class="col-sm-12">

        <div class="well well-light">

            <div class="row">
                
                <volist name='data' id='v'>
                
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="panel panel-success pricing-big">

                        <div class="panel-heading">
                            <h3 class="panel-title">
                                {$v.name}</h3>
                        </div>
                        <div class="panel-body no-padding text-align-center">
                            <div class="the-price">
                                <h1>
                                    <strong>
                                        <switch name='v.type'><case value="1">免费报名</case><case value="2">收费报名【{$v.pay_num}元】</case></switch>
                                    </strong>
                                </h1>
                            </div>
                            <div class="price-features">
                                <ul class="list-unstyled text-left">
                                    <li>
                                        <i class="fa fa-calendar-o text-success"></i>
                                        报名截止时间<br/><strong>{$v.end_time|date='Y/m/d H:i',###}</strong>
                                    </li>
                                    <li><i class="fa fa-clock-o text-success"></i>
                                        剩余时间<br/><strong>{$v.deadline.day}天{$v.deadline.hour}时{$v.deadline.min}分{$v.deadline.sec}秒</strong>
                                    </li>
                                    <li><i class="fa fa-male text-success"></i>
                                        报名人数<br/><strong>
                                        <div class="progress" rel="tooltip" data-original-title="{$v.submit_num}/{$v.people_num}人" data-placement="top">
                                            <div class="progress-bar bg-color-teal" aria-valuetransitiongoal="{$v['submit_num']/$v['people_num']*100}"></div>
                                        </div>
                                        </strong>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="panel-footer text-align-center">
                            <a href="javascript:void(0);" class="btn btn-primary btn-block" role="button">Download <span> now!</span></a>
                            <div>
                                Or <a href="javascript:void(0);">Sign up</a>
                            </div>
                        </div>
                    </div>
                </div>
                    
                </volist>
		    	
            </div>


        </div>

    </div>

</div>


<script type="text/javascript">

    // DO NOT REMOVE : GLOBAL FUNCTIONS!
    pageSetUp();

    // PAGE RELATED SCRIPTS
    // load bootstrap-progress bar script
    loadScript("__STATIC__/smart_admin/js/plugin/bootstrap-progressbar/bootstrap-progressbar.js", progressBarAnimate);

    // Fill all progress bars with animation
    function progressBarAnimate() {
            $('.progress-bar').progressbar({
                    display_text : 'fill'
            });
    }    

</script>
